<template>
	<el-select
		:value="value"
		:filterable="true"
		:clearable="clearable"
		:multiple="multiple"
		:disabled="disabled"
		:placeholder="placeholder"
		@change="change"
	>
		<el-option
			v-for="item in endOptions"
			:key="item.subjectId"
			:label="item.subjectName"
			:value="item.subjectId"
			:disabled="item.disabled"
		/>
	</el-select>
</template>

<script>
	import bdApi from "@rc/apis/bd/index.mjs";

	export default {
		props: {
			// 科目id,支持v-model
			value: {
				type: [String, Array],
				default: ""
			},
			// 完整的选中列表，元素应是包含{subjectName,subjectId}的一个对象，如果选中的对象在可选列表中找不到，则会作为一个禁用选项插入到可选列表中用于回显
			checkFullList: {
				type: Array,
				default: () => []
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			// 项目id
			projectId: {
				type: String,
				default: ""
			},
			//科目是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 项目id是否需要必传
			isProjectRequired: {
				type: Boolean,
				default: true
			},
			// 禁用的科目id列表
			disabledIdList: {
				type: Array,
				default: () => []
			},
			// 尝试点击删除禁用科目时的提示语
			disabledDelText: {
				type: String,
				default: "该科目不允许删除"
			},
			//
			placeholder: {
				type: String,
				default: "请选择科目"
			},
			showDisabledSubject: {
				//是否查询禁用的科目
				type: Boolean,
				default: false
			},
			clearable: {
				//是否可以清除
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				options: [] // 从后端获取的合法选项列表
			};
		},
		computed: {
			endOptions() {
				let noneItems = this.checkFullList.filter((i1) => {
					// 判断条件这么多主要是兼容多选和单选
					return (
						(this.value || this.value.length) &&
						(i1.subjectId === this.value || this.value.some((i) => i === i1.subjectId)) &&
						!this.options.some((i2) => i2.subjectId === i1.subjectId)
					);
				});
				noneItems = noneItems.map((i) => ({ ...i, disabled: true }));
				return [...noneItems, ...this.options];
			}
		},
		watch: {
			projectId: {
				handler(val) {
					if (!val && this.isProjectRequired) {
						this.options = [];
						return;
					}
					this.queryList(val, () => {
						this.$emit("ready", this.options);
					});
				},
				immediate: true
			}
		},
		methods: {
			queryList(projectId, callback) {
				bdApi.querySubjectListByProjectId({
					data: {
						projectId,
						subjectAvlstatus: this.showDisabledSubject ? "" : "Y",
						subjectNature: "S"
					},
					success: ({ data }) => {
						this.options = data.map((i1) => ({
							...i1,
							disabled: this.disabledIdList.some((i2) => i2 === i1.subjectId)
						}));
						callback && callback();
					}
				});
			},
			change(data) {
				if (this.multiple && data.length < this.value.length) {
					// 准备删除科目
					const delList = this.value.filter((i1) => !data.some((i2) => i2 === i1)); // 准备删除的科目列表
					if (delList.some((i1) => this.disabledIdList.some((i2) => i2 === i1))) {
						// 准备删除的内容中有禁用的id，不允许删除
						this.$message.warning(this.disabledDelText);
						return;
					}
				}
				this.$emit("input", data);
				this.$emit("change", data);
			},
			api_getOptions() {
				return this.endOptions;
			}
		}
	};
</script>

<style scoped lang="less">
	/deep/ .el-tag {
		height: 23px;
		line-height: 23px;
		background-color: #f0f2f5;
		border-color: transparent;

		.el-tag__close {
			color: #fff;
		}
	}
</style>
